<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clipping</title>

    <style type="text/css">
        #data1 {
            position: absolute;
            top: 100px;
            left: 100px;
            padding: 0;
            width: 200px;
            height: 200px;
            background-color: #ff0;
            clip: rect(0px, 200px, 200px, 0px);
        }   
    </style>

    <script type="text/javascript">
    //<![CDATA[
        var bottom = 200;
        var clipped = false;

        document.onclick = testItem;

        function testItem() {
            if (clipped) {
                unClipItem();
            }
            else {
                clipItem();
            }
        }

        function clipItem() {
            bottom -= 20;
            var clip = "rect(0px, 200px," + bottom + "px, 0px)";
            var obj = document.getElementById("data1");
            obj.style.clip = clip;
            if(bottom == 40) {
                clipped = true;
            }
            else {
                setTimeout("clipItem()", 100);
            }
        }

        function unClipItem() {
            bottom += 20;
            var clip = "rect(0px, 200px, " + bottom + "px, 0px)";
            var obj = document.getElementById("data1");
            obj.style.clip = clip;
            if (bottom == 200) {
                clipped = false;
            }
            else {
                setTimeout("unClipItem()", 100);
            }
        }
    //]]>

    </script>
    
</head>
<body>
    <div id="data1">
        This is the text contained within the div block.
    </div>
</body>
</html>
